<template>
	<view class="hbh_searchBox">
		<view class="hbh_left">
			<view class="hbh_child" v-for="(item,index) in arr" :key="index"
				:style="{color:item.flag?'blue':'#000',background:item.flag?'#f7f7f7':'#fff'}"
				@click="handleLight(item,index)">
				{{item.text}}
			</view>
		</view>
		<view class="hbh_right">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll"
				@scrolltolower="lower">
				<view v-if="isInput" class="hbh_input">
					<input v-model.trim="bookName" placeholder="请输入关键字" type="text">
					<text @click="find">搜索</text>
				</view>
				<template v-if="novelList.length>0 && !isNone">
					<view v-for="(item,index) in novelList
				" :key="index
				" :id="'hbh'+(index+1)" class="scroll-view-item">
						<view class="box_top">
							<view class="novel_img">
								<image v-if="item.noLoad !=3"
									:src="item.noLoad==1?'/static/image/loadingNovel.png':item.cover_image"
									mode="scaleToFill" @error="imageError($event,index)"
									@load="imageLoad($event,index)"></image>
								<image v-if="item.noLoad ==3" src="/static/image/nopic.gif"
									mode="scaleToFill"></image>
							</view>
							<view class="caozuo">
								<view class="row">
									<text style="color:#55aaff">{{item.book_name}}</text>
								</view>
								<view class="row">
									<text>字数：</text><text>{{item.book_words_number}}</text>
								</view>
								<view class="row">
									<text>(作者){{item.authorName}}</text>
								</view>
							</view>
						</view>
						<view class="box_end">
							<text class="start" @click="addBookList(item)">加入书架</text>
							<text class="start" @click="startRead(item)">开始阅读</text>
						</view>
					</view>
				</template>
				<template v-if="isNone">
					<view class="noneTip">{{tipText}}</view>
				</template>
				<view v-if="!isInput" class="endTip">
					<template v-if="flag">
						<text>正在加载中</text>
						<image class="loadData" src="/static/image/loadingSmall.png" mode=""></image>
					</template>
					<template v-else>
						<text>没有更多小说了</text>
						<image src="/static/image/nodata.png" mode=""></image>
					</template>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		selectNovel
	} from "@/api/index.js"
	export default {
		name: "searchBookChild",
		props: ["list"],
		data() {
			return {
				arr: this.list,
				height: 300,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				classify_id: this.list[0].classify_id,
				pageSize: 10,
				pageNum: 1,
				novelList: [],
				isInput: false,
				bookName: "",
				pageSize: 10,
				pageNum: 1,
				isHave: true,
				isNone: false,
				tipText: "",
				flag: false
			};
		},
		created() {
			this.getNovelList({
				classify_id: this.classify_id,
				pageSize: this.pageSize,
				pageNum: this.pageNum
			})
		},
		methods: {
			imageError(e, index) {
				let item = this.novelList[index]
				item.noLoad = 3
				this.$set(this.novelList[index], index, item)
			},
			imageLoad(e, index) {
				let item = this.novelList[index]
				item.noLoad = 2
				this.$set(this.novelList[index], index, item)
			},
			//搜索
			find() {
				if (!this.bookName) {
					return
				}
				this.pageNum = 1
				this.novelList = []
				this.getNovelList({
					book_name: this.bookName,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				})
			},
			addBookList(item) {
				uni.showToast({
					icon: "none",
					title: "待开发中，敬请期待！"
				})
			},
			//开始阅读
			startRead(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/contentDetail/contentDetail?bookName=${item.book_name}&book_id=${item.book_id}`
				})
			},
			handleLight(item, index) {
				this.bookName = ""
				this.isNone = false
				this.isHave = true
				this.novelList = []
				this.pageNum = 1
				this.goTop()
				this.arr.map(item => item.flag = false)
				item.flag = true
				if (!item.classify_id) {
					console.log("搜索")
					this.isInput = true
					return
				} else {
					this.isInput = false
				}
				this.classify_id = item.classify_id
				this.getNovelList({
					classify_id: this.classify_id,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				})
			},
			getNovelList(obj) {
				selectNovel(obj).then((res) => {
					if (res.code == 200) {
						if (res.data.length > 0) {
							res.data.forEach((item, index) => {
								item.noLoad = 1
							})
							this.novelList = this.novelList.concat(res.data)
							if (this.novelList.length == 0) {
								this.isNone = true
								this.tipText = `抱歉，未找到与关键字" ${this.bookName} "相关的小说`
							} else {
								this.isNone = false
							}
							if (res.data.length == this.pageSize) {
								this.isHave = true
							} else {
								this.isHave = false
							}
						} else {
							if (this.novelList.length == 0) {
								this.isNone = true
								this.tipText = `抱歉，未找到与关键字" ${this.bookName} "相关的小说`
							} else {
								this.isNone = false
							}
							console.log(this.isNone)
							this.isHave = false
						}

					} else {
						if (this.novelList.length == 0) {
							this.isNone = true
							this.tipText = `抱歉，未找到与关键字'${this.bookName}'相关的小说`
						} else {
							this.isNone = false
						}
						this.isHave = false
					}
				}).catch((err) => {
					uni.showToast({
						icon: "none",
						title: "异常错误，请反馈给官方！"
					})
					this.isHave = false
				})
			},
			lower() {
				console.log(this.isHave)
				if (this.isHave) {
					this.pageNum += 1
					this.flag = true
					if (this.isInput) {
						this.getNovelList({
							book_name: this.bookName,
							pageSize: this.pageSize,
							pageNum: this.pageNum
						})
					} else {
						this.getNovelList({
							classify_id: this.classify_id,
							pageSize: this.pageSize,
							pageNum: this.pageNum
						})
					}

				} else {
					console.log("没有数据了")
					this.flag = false
				}
				console.log("触底了")
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop() {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 滚动条样式
	/deep/ ::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: #ccc !important;
		-webkit-appearance: auto !important;
		display: block;
	}

	/deep/ ::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px !important;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
		background: #7b7979 !important;
	}

	/deep/ ::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
		// border-radius: 10px !important;
		background: #FFFFFF !important;
	}

	.hbh_searchBox {
		height: 100%;
		display: flex;

		.hbh_left {
			width: 240rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			border-right: 1rpx dotted #ccc;
			box-sizing: border-box;

			.hbh_child {
				height: 80rpx;
				line-height: 80rpx;
				text-align: left;
				padding-left: 40rpx;
				box-sizing: border-box;
			}
		}

		.hbh_right {
			width: calc(100% - 240rpx);
			height: 100%;
			background-color: #f7f7f7;
			font-size: 30rpx;

			.scroll-Y {
				height: 100%;

				.endTip {
					height: 80rpx;
					font-size: 30rpx;
					color: #00aaff;
					display: flex;
					justify-content: center;
					align-items: center;

					@keyframes myfirst {
						from {
							transform: rotate(0deg);
						}

						to {
							transform: rotate(360deg);
						}
					}

					image {
						width: 36rpx;
						height: 36rpx;
					}

					.loadData {
						animation: myfirst 2s linear 0s infinite normal;
					}
				}

				.noneTip {
					width: 100%;
					padding: 40rpx;
					box-sizing: border-box;
					color: red;
				}

				.hbh_input {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 40rpx;
					box-sizing: border-box;

					input {
						flex: 1;
						height: 80rpx;
						border: 1rpx solid #ccc;
						box-sizing: border-box;
						border-top-left-radius: 20rpx;
						border-bottom-left-radius: 20rpx;
						padding: 0 20rpx;
					}

					text {
						width: 100rpx;
						background-color: #ccc;
						color: #55aaff;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 30rpx;
						border-top-right-radius: 20rpx;
						border-bottom-right-radius: 20rpx;

					}
				}

				.scroll-view-item {
					margin-bottom: 20rpx;
					padding-right: 40rpx;
					box-sizing: border-box;
					background-color: #fff;
					padding: 20rpx 0rpx;

					.box_top {
						display: flex;
						justify-content: space-between;

						.caozuo {
							width: calc(100% - 220rpx);
							display: flex;
							flex-direction: column;

							.row {
								width: 100%;
								display: flex;

								.btn {
									height: 60rpx;
									width: 200rpx;
									line-height: 60rpx;
									text-align: center;
									align-self: flex-end;
									border-radius: 20rpx;
								}
							}

						}

						.novel_img {
							width: 200rpx;
							height: 200rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
							}
						}
					}

					.box_end {
						height: 100rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-right: 30rpx;
						box-sizing: border-box;

						.start {
							width: 200rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							color: #fff;
							background-color: #55aaff;
							border-radius: 10rpx;
						}
					}



				}
			}
		}
	}
</style>